import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, ScrollView} from 'react-native';
import {Flex, List, Toast, WhiteSpace, WingBlank} from '@ant-design/react-native';
import {ownerPaymentInfo} from '~/api/parking';
import moment from 'moment';
import {connect} from 'react-redux';
const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};

class PaymentDetailed extends Component {
    static navigationOptions = {
        title: '记录详情',
    };
    constructor(props) {
        super(props);
        this.state = {
            order_id: this.props.navigation.getParam('order_id'),
            page_index: 1,
            page_size: 10,
            list: [],
            DepositPirce: 0,
            BuildingName: '',
            RegDateTime: '',
            ParkingName: '',
            AreaName: '',
            AreaBuilt: 0,
            AreaInner: 0,
            CompanyName: '',
            CityName: '',
            Address: '',
            PayMode: '',
            PaySum: '',
        };
        ownerPaymentInfo({
            order_id: this.state.order_id,
        }).then((r) => {
            // console.log(r);
            if (r.code === 0) {
                this.setState({
                    DepositPirce: r.data.DepositPirce,
                    BuildingName: r.data.BuildingName,
                    RegDateTime: r.data.RegDateTime,
                    ParkingName: r.data.ParkingName,
                    AreaName: r.data.AreaName,
                    AreaBuilt: r.data.AreaBuilt,
                    AreaInner: r.data.AreaInner,
                    CompanyName: r.data.CompanyName,
                    CityName: r.data.CityName,
                    Address: r.data.Address,
                    PayMode: r.data.PayMode,
                    PaySum: r.data.PaySum,
                });
            } else {
                Toast.info(r.msg, 1);
            }
        });
    }

    render() {
        return (
            <ScrollView>
                <WingBlank size={'lg'}>
                    <View style={{width: '100%', height: '100%'}}>
                        <Flex justify={'center'} direction={'column'} style={{width: '100%', height: '25%'}}>
                            <Text style={{color: 'red', fontSize: 20}}>车位定金￥{this.state.PaySum}</Text>
                            <Text style={{color: '#666666', fontSize: 14}}>
                                购买{this.state.BuildingName}
                                {this.state.ParkingName}车位的定金
                            </Text>
                        </Flex>
                        <View
                            style={{width: '100%', height: 98, backgroundColor: '#FFFFFF', justifyContent: 'space-between', flexDirection: 'column'}}>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'}>
                                <Text style={{paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>支付方式</Text>
                                <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>{this.state.PayMode}</Text>
                            </Flex>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'}>
                                <Text style={{paddingBottom: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>支付时间</Text>
                                <Text style={{paddingBottom: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>
                                    {moment(this.state.RegDateTime).format('YYYY.MM.DD HH:mm')}
                                </Text>
                            </Flex>
                        </View>
                        <WhiteSpace size={'lg'} />
                        <View style={{width: '100%', height: 400, backgroundColor: '#FFFFFF', marginBottom: 20}}>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'} wrap="wrap">
                                <Text style={{width: '30%', paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>车位编号</Text>
                                <View style={{width: '70%', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                                    <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>
                                        {this.state.ParkingName}
                                    </Text>
                                </View>
                            </Flex>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'} wrap="wrap">
                                <Text style={{width: '30%', paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>楼层</Text>
                                <View style={{width: '70%', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                                    <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>{this.state.AreaName}</Text>
                                </View>
                            </Flex>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'} wrap="wrap">
                                <Text style={{width: '30%', paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>建筑面积</Text>
                                <View style={{width: '70%', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                                    <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>
                                        {this.state.AreaBuilt}㎡
                                    </Text>
                                </View>
                            </Flex>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'} wrap="wrap">
                                <Text style={{width: '30%', paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>使用面积</Text>
                                <View style={{width: '70%', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                                    <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>
                                        {this.state.AreaInner}㎡
                                    </Text>
                                </View>
                            </Flex>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'} wrap="wrap">
                                <Text style={{width: '30%', paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>小区名称</Text>
                                <View style={{width: '70%', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                                    <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>
                                        {this.state.BuildingName}
                                    </Text>
                                </View>
                            </Flex>
                            <Flex style={{width: '100%'}} direction={'row'} justify={'between'} wrap="wrap">
                                <Text style={{width: '30%', paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>开发商名称</Text>
                                <View style={{width: '70%', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                                    <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>
                                        {this.state.CompanyName}
                                    </Text>
                                </View>
                            </Flex>
                            <Flex style={{width: '100%', marginBottom: 17.5}} direction={'row'} justify={'between'} wrap="wrap">
                                <Text style={{width: '30%', paddingTop: 17.5, paddingLeft: 10.5, fontSize: 15, color: '#666666'}}>小区地址</Text>
                                <View style={{width: '70%', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                                    <Text style={{paddingTop: 17.5, paddingRight: 10.5, fontSize: 15, color: '#333333'}}>
                                        {this.state.CityName}
                                        {this.state.Address}
                                    </Text>
                                </View>
                            </Flex>
                        </View>
                    </View>
                </WingBlank>
            </ScrollView>
        );
    }
}
export default connect(mapGetter)(PaymentDetailed);
